/*
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-30 14:23:02
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-08-08 19:35:44
 * @FilePath: \mygit\个人网站\js\blog-single.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
(function () {

    let message = document.querySelector('#message')
    let nickName = document.querySelector('#nickname')
    let email = document.querySelector('#email')
    let messageBoard = document.querySelector('#leaveAMessage .messageArea .messageBoard')
    let release = document.querySelector('.release')
    let leftWord = document.querySelector('.leftword')
    let rightWord = document.querySelector('.rightword')
    let content = document.querySelector('.content')
    let btn = document.querySelector('.btn')
    let url = 'https://www.fastmock.site/mock/ce31180fd8d8f74fdb1c7b538a29a37d/liuyan/getliuyan'

// 文章详情
    let str = location.href
    //   console.log(str);
    let reg = /\d+/g
    let result = str.match(reg);
    // console.log(result);
    let arrId = result[result.length - 1]
    // console.log(arrId);


    let id = arrId
    let url1 = "http://81.70.162.221:3000/getBlog?id=" +id;
    // console.log(url1);
    axios.get(url1).then(function (response) {
        let arr = response.data
        // console.log(arr);
        leftWord.innerHTML = arr.title
        rightWord.innerHTML = arr.createTime
        content.innerHTML = arr.content
    })
// 前三个评论
    axios.get(url).then(function (response) {
        let blogs = response.data.list
        // console.log(blogs);

        axios.get(url).then(function (response) {
            message.insertAdjacentHTML("afterbegin", `
            <li class="message-list" id='${blogs[0].id}'>
            <div class="personalInformation flex justify-content-between  align-items-center">
                <div class="flex align-items-center justify-content-between">
                    <img src="./images/blog-single/t2.png" alt="">
                    <div class="name">${blogs[0].title}</div>
                </div>
                <div class="date ">${blogs[0].date}</div>
            </div>
            <div class="comment">${blogs[0].desc}</div>
            </li>
            
            `)
            message.insertAdjacentHTML("afterbegin", `
            <li class="message-list" id='${blogs[1].id}'>
            <div class="personalInformation flex justify-content-between  align-items-center">
                <div class="flex align-items-center justify-content-between">
                    <img src="./images/blog-single/t2.png" alt="">
                    <div class="name">${blogs[1].title}</div>
                </div>
                <div class="date ">${blogs[1].date}</div>
            </div>
            <div class="comment">${blogs[1].desc}</div>
            </li>
            
            `)
            message.insertAdjacentHTML("afterbegin", `
            <li class="message-list" id='${blogs[2].id}'>
            <div class="personalInformation flex justify-content-between  align-items-center">
                <div class="flex align-items-center justify-content-between">
                    <img src="./images/blog-single/t2.png" alt="">
                    <div class="name">${blogs[2].title}</div>
                </div>
                <div class="date ">${blogs[2].date}</div>
            </div>
            <div class="comment">${blogs[2].desc}</div>
            </li>
            
            `)

            // 点击展开所有评论
            btn.addEventListener('click', function () {
                message.innerHTML = ""
                blogs.forEach(item => {
                    message.insertAdjacentHTML("afterbegin", `
                    <li class="message-list" id='${item.id}'>
                       <div class="personalInformation flex justify-content-between  align-items-center">
                          <div class="flex align-items-center justify-content-between">
                             <img src="./images/blog-single/个人头像1x.png" alt="">
                             <div class="name">${item.title}</div>
                          </div>
                       <div class="date ">${item.date}</div>
                     </div>
                   <div class="comment">${item.desc}</div>
                   </li>
                   `)
                });
            })
          
            // 添加评论
            release.addEventListener('click', function () {
                add()
                blogs.push({
                    title: nickName.value,
                    desc: message.value,
                    date: `${ getFullDay(new Date())}`
                })

                axios.post('http://81.70.162.221:3000/postComment',).then(function (res) {
                    if (res.data == 'success') {
                        // console.log('1111');
                        alert('评论成功')
                    }
                });
                messageBoard.value = ''
                nickName.value = ''
                email.value = ''
            })
        });
        // console.log(messageBoard);
        // 添加评论函数
        function add() {
            message.insertAdjacentHTML("afterbegin", `
            <li class="message-list">
            <div class="personalInformation flex justify-content-between  align-items-center">
                <div class="flex align-items-center justify-content-between">
                    <img src="./images/blog-single/个人头像1x.png" alt="">
                    <div class="name">${nickName.value}</div>
                </div>
                <div class="date ">2022-07-30</div>
            </div>
            <div class="comment">${message.value}</div>
        </li>
            
            `)
        }
    })
})()